<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>购物车</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<link rel="apple-touch-icon-precomposed" href="images/screenLogo.png" />
		<link rel="stylesheet" type="text/css" href="css/m2015.css" />
		<script src="js/zepto.min.js" type="text/javascript"></script>
		<script src="js/main.js"></script>
		<script src="js/CartMgr.js"></script>
		<style>
			.cart_other {
				margin: 0;
			}
			
			.cart_other h5 {
				font-weight: 400;
			}
			
			.cart_box .vlist ul ul {
				padding: 0;
			}
			
			.cart_box .vlist ul ul li {
				padding: 3px 0;
				margin-top: 0;
				border: 0;
			}
			
			.cart_box .vlist ul ul li em {
				display: inline;
			}
			
			.cart-empty {
				text-align: center;
				color: #999;
				padding: 10px;
			}
			
			.cart-empty p i {
				font-size: 48px;
			}
			
			.cart-empty a {
				display: block;
				width: 200px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background: #f44263;
				color: #fff;
				margin: 10px auto;
			}
			
			.sj_fuwu li {
				line-height: 18px;
				height: auto;
			}
			
			.all-checked {
				background: #f3f3f3;
				padding: 10px;
			}
			
			.all-checked input {
				margin-right: 5px;
			}
			
			.cart_one .check-box {
				float: left;
				line-height: 80px;
				position: relative;
			}
			
			.cart_box .vlist ul ul li label {
				margin-left: 50px;
			}
			/*重构样式代码*/
			
			.cart_box .vlist ul {
				padding: 0;
			}
			
			.cart_box .vlist li {
				border-bottom: 1px solid #f1f1f1;
				padding: 10px;
			}
			
			.vlist li .list_info .tit {
				word-break: break-all;
				word-wrap: break-word;
			}
			
			.cart_box .vlist li .list_img {
				margin: 0 5px;
			}
			
			.cart_box .vlist li .list_info {
				margin-left: 115px;
			}
			
			.cart_btn {
				height: 90px;
			}
			
			.cart_btn a {
				margin: 10px 4px;
			}
			
			.cart_plus a,
			.cart_plus input {
				border: 1px solid #f5f5f5;
			}
			
			.cart_num {
				position: absolute;
				top: 60px;
				left: 125px;
			}
			
			.cart_del {
				right: 20px;
				top: 50px;
			}
			/*新增样式代码*/
			
			.cart-status {
				background: #fff;
				border-top: 1px solid #f1f1f1;
				position: fixed;
				bottom: 0;
				width: 100%;
			}
			
			#return {
				height: 25px;
				line-height: 25px;
				text-align: left;
				float: right;
				background: none;
				color: #45A1DE;
				width: auto;
				margin: 0;
			}
			
			.pop_head {
				line-height: 45px;
				height: 45px;
				font-size: 16px;
				padding: 0 15px;
				background: #f5f5f5;
				border-bottom: 1px solid #f1f1f1;
			}
			
			.pop_head em {
				float: right;
				line-height: 43px;
			}
			
			.pop_head em span {
				font-size: 22px;
				color: #f33;
			}
			
			.view {
				padding: 10px 15px 15px 15px;
				line-height: 28px;
				overflow-x: hidden;
				overflow-y: auto;
			}
			
			.view dl {
				float: left;
				text-align: center;
			}
			
			.view dl img {
				width: 60%;
			}
			
			.view li {
				font-size: 14px;
			}
			
			.view h2 {
				font-weight: normal;
				font-size: 15px;
				color: #45a1de;
			}
			
			.color_pj {
				position: fixed;
				background: #fff;
				max-width: 640px;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			
			.color_bd h3 {
				line-height: 45px;
				height: 45px;
				font-size: 16px;
				padding: 0 15px;
				border-bottom: 1px solid #f1f1f1;
				font-weight: normal;
				background: #f5f5f5;
				overflow: hidden;
				text-align: left;
			}
			
			.color_bd h3 span {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				float: left;
				width: 70%;
			}
			
			.color_bd h3 em {
				float: right;
				color: #f60;
			}
			
			.color_bd li {
				text-align: center;
			}
			
			.color_bd li img {
				width: 70%;
				margin: 20px 0;
			}
			
			.color_hd {
				height: 110px;
				padding-left: 10px;
				font-size: 0;
				overflow-y: hidden;
				overflow-x: auto;
			}
			
			.color_hd li {
				width: 65px;
				height: 65px;
				border: 1px solid #f1f1f1;
				display: inline-block;
				margin-right: 10px;
				float: left;
			}
			
			.color_hd li p {
				height: 22px;
				line-height: 22px;
			}
			
			.color_hd li img {
				width: 100%;
				height: 100%;
			}
			
			.color_active {
				border: 1px solid #f60 !important;
			}
			
			.pop_foot {
				position: fixed;
				width: 100%;
				bottom: 0;
				height: 90px;
				border-top: 1px solid #f1f1f1;
				background: #fff;
			}
			
			.pop_foot a {
				width: 50%;
				text-align: center;
				line-height: 50px;
				font-size: 14px;
				float: right;
			}
			
			.pop_foot .ido {
				padding: 9px 0;
				text-align: center;
				display: block;
			}
			
			.tuijian {
				border-top: 10px solid #eff2f5;
			}
			
			.tuijian li {
				line-height: 50px;
				padding: 0 50px 0 15px;
				display: block;
				position: relative;
				border-bottom: 1px solid #f1f1f1;
				overflow: hidden;
			}
			
			.tuijian li label {
				display: block;
				border-right: 1px solid #f1f1f1;
			}
			
			.tuijian li span {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				position: absolute;
				width: 50%;
			}
			
			.tuijian li i {
				font-family: "宋体";
				position: absolute;
				right: 0;
				font-size: 14px;
				width: 50px;
				text-align: center;
			}
			
			.tuijian li em {
				float: right;
				color: #f60;
				margin-right: 15px;
			}
			
			.color_sel i {
				color: #45A1DE;
			}
			
			.color_default i {
				color: #e1e1e1;
			}
		</style>
	</head>

	<body style="padding-bottom: 90px;">
		<header id="header" style="">
			<div class="topbar">
				<a href="javascript:history.back();" class="back_btn"><i class="iconfont">ş</i></a>
				<a href="javascript:;" class="top_home"><i class="iconfont">ƙ</i></a>
				<h1 class="page_title">购物车</h1>
			</div>

			<div class="home_menu" id="hMenu">
				<a href="index.html"><i class="go_index"></i><span>首页</span></a>
				<a href="goods_cat.html"><i class="go_fenlei"></i><span>商品分类</span></a>
				<a href="cart.html"><i class="go_cart"></i><span>购物车</span></a>
				<a href="member_addr.html"><i class="go_me"></i><span>收货地址</span></a>
			</div>
		</header>

		<script>
			//title右上角隐藏菜单
			$(".top_home").click(function() {
				var target = $(".home_menu");
				if(target.slideToggle) {
					target.slideToggle()
				} else {
					target.toggle()
				}
			});
		</script>

		<div class="wrapper cart_box" style="padding-bottom: 1px;">
			<div class="vlist" style="padding: 0;">
				<div class="all-checked">
					<label> <input type="checkbox" checked="" />全选</label>
					<a href="javascript:clearCart();" class="right"><i class="iconfont">Ť</i> 清空购物车</a>
				</div>
				<ul>
					<li class="cart_one">
						<div class="check-box">
							<input type="checkbox" name="basketid" value="3263300" id="basket_3263300" checked="" />
						</div>
						<label for="basket_3263300">
			    			<img class="list_img" src="images/cart/biao.jpg" /> 
			       			<div class="list_info"> 
				        		<div class="tit c666">瑞士浪琴名匠系列38.5mm 盘机械手表 326</div> 
						        <div class="price red2" style="padding-bottom: 35px;">
						        	￥ <span>10488.00</span> 
						        	<input type="hidden" value="10488.00" name="price" /> 
						        </div> 
				        		<input type="hidden" value="3263300" name="basket_id" /> 
						        <div class="clear"></div> 
					       	</div>
			    		</label>
						<p class="qingdan_shul cart_num">数量：<span>1</span></p><span class="cart_del"><i class="iconfont">Ť</i></span>
					</li>

					<li class="cart_one">
						<div class="check-box">
							<input type="checkbox" name="basketid" value="322300" id="basket_3263300" checked="" />
						</div>
						<label for="basket_3263300">
			    			<img class="list_img" src="images/goods_detail/tj.jpg" /> 
			       			<div class="list_info"> 
				        		<div class="tit c666">西湖牌杭白菊桐乡胎菊50g*3罐 菊花茶</div> 
						        <div class="price red2" style="padding-bottom: 35px;">
						        	￥ <span>59.90</span> 
						        	<input type="hidden" value="59.90" name="price" /> 
						        </div> 
				        		<input type="hidden" value="322300" name="basket_id" /> 
						        <div class="clear"></div> 
					       	</div>
			    		</label>
						<p class="qingdan_shul cart_num">数量：<span>1</span></p><span class="cart_del"><i class="iconfont">Ť</i></span>
					</li>

					<li class="cart_one">
						<div class="check-box">
							<input type="checkbox" name="basketid" value="3263300" id="basket_3263300" checked="" />
						</div>
						<label for="basket_3263300">
			    			<img class="list_img" src="images/cart/qkl.jpg" /> 
			       			<div class="list_info"> 
				        		<div class="tit c666">比利时进口德菲丝松露黑巧克力 传统 </div> 
						        <div class="price red2" style="padding-bottom: 35px;">
						        	￥ <span>75.90</span> 
						        	<input type="hidden" value="75.90" name="price" /> 
						        </div> 
				        		<input type="hidden" value="3263300" name="basket_id" /> 
						        <div class="clear"></div> 
					       	</div>
			    		</label>
						<p class="qingdan_shul cart_num">数量：<span>1</span></p><span class="cart_del"><i class="iconfont">Ť</i></span>
					</li>
				</ul>
			</div>

			<!--选购商品-->
			<!--<div class="tuijian"> 
    <ul> 
     <li> <label class="color_sel" onclick="selcolor(this,14835, 22886);"> <input type="checkbox" style="margin-right: 10px;" value="22886" /><span>羽博 YOOBAO S3 移动电源 充电宝 6000毫安 2A输出</span><em>59元</em><i>选色</i></label></li> 
     <li> <label class="color_default" onclick="selcolor(this,10187, 14901);"> <input type="checkbox" style="margin-right: 10px;" value="14901" /><span>Plantronics 缤特力 Marque 2 M165 音乐蓝牙耳机</span><em>240元</em><i>选色</i></label></li> 
     <li> <label class="color_default" onclick="selcolor(this,21313, 36479);"> <input type="checkbox" style="margin-right: 10px;" value="36479" /><span>飞尚 Freeson 红米note3 创意支架透明软胶壳</span><em>50元</em><i>选色</i></label></li> 
     <li> <label class="color_default" onclick="selcolor(this,21314, 36480);"> <input type="checkbox" style="margin-right: 10px;" value="36480" /><span>摩可 Mocoll 红米note3 钢化玻璃膜</span><em>60元</em><i>选色</i></label></li> 
    </ul> 
   </div>-->

			<div id="lhCartTip" class="lh_jy_tip" style="display: block;">
				交易提醒：由于手机号码的特殊性，请您手机号码保持畅通并且不要轻易透漏您的验证码等个人信息，以防个人财产损失。
			</div>
			<div class="cart-status">
				<script type="text/html" id="cartTotalTmpl">
					{{if cartCount!=0}}
					<div class="cart_btn">
						<p style="margin-top: 10px;">您选择了<span>{{checkedCount}}</span>件商品，总计：<b class="red1">￥{{cartPrice}}</b></p>
						<a href="index.html" class="btn1" style="background: #45A1DE;">继续购物</a>
						<a href="javascript:;" onclick="buy()" class="btn1">去结算</a>
					</div>
					{{/if}} {{if cartCount==0}}
					<div class="cart-empty">
						<p><i class="iconfont">&#365;</i></p>
						<p>购物车里什么都没有，快去买点什么吧~</p>
						<a href="index.html">去逛逛</a>
					</div>
					{{/if}}
				</script>
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				$(".cart_one").each(function(index, item) {
					var product = $(item);
					BindEvent(product);
				});
				$(".cart_box .lh").each(function() {
					if($.trim($(this).text()).length > 0) {
						$("#lhCartTip").show();
						return false;
					}
				});

			});
			$(".all-checked input").change(function() {
				if($(this).prop("checked") == true) {
					$(".vlist ul li input[type='checkbox'],.all-checked input").prop("checked", true);
				} else {
					$(".vlist ul li input[type='checkbox'],.all-checked input").prop("checked", false);
				}
				CalcAmount();
			});
			$("input[name='basketid']").change(function() {
				if($(this).prop("checked") == false) {
					$(".all-checked input").prop("checked", false);
				}
				CalcAmount();
			});

			function buy() {
				var basketids = [];
				$("input[name='basketid']").each(function() {
					if($(this).prop("checked") == true) {
						basketids.push($(this).val())
					}
				});
				if(basketids.length == 0) {
					layer.open({
						content: "请至少勾选一个商品购买！",
						shadeClose: false,
						btn: ['好的']
					});
					return;
				}
				layer.open({
					type: 2,
					content: "加载中",
					shadeClose: false
				});
				$.ajax({
					type: "post",
					url: "https://segmentfault.com/a/1190000003982302",
					dataType: "jsonp",
					data: {
						date: $(".month").val(),
						flag: 3,
					},
					success: function(data) {
						layer.closeAll();
						location.href = "cart_check.html"
					},
					error: function(data2) {
						layer.closeAll();
						location.href = "cart_check.html"
					}
				})
			}
		</script>
	</body>

</html>